<template>
  <div class="big-box">
    <div class="header-container">
      <div class="title">ta为我选的单</div>
      <el-form
        ref="formInline"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="预选单来源：" prop="childId">
          <el-select
            v-model="formInline.childId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in accountData"
              :key="item.userId"
              :label="formatRemark(item)"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="预选单号：" prop="orderBatch">
          <el-input v-model="formInline.orderBatch" style="width: 300px" placeholder="请输入完整预选单号" />
        </el-form-item>
        <el-form-item class="btn">
          <span class="search-btn" @click="onSubmit">查询</span>
          <span class="reset-btn" @click="resetForm">重置</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-container" />
    <div class="main-container">
      <div class="list-container">
        <span>列表</span><span>商品名称</span> <span>单价（元）</span><span>数量</span> <span>小计（元）</span><span>操作</span>
      </div>
      <div v-for="(item,index) in preOrderList" :key="index" class="collapse-container">
        <el-collapse v-model="activeNames" accordion @change="handleChange">
          <el-collapse-item :name="item.orderBatch">
            <template slot="title">
              <i
                :class="item.open ? 'el-icon-minus' : 'el-icon-plus'"
              />
              <div class="order-source">
                <span>预选单来源：</span><span v-text="formatRemark(item)">13800138000（张三）</span>
              </div>
              <div class="delivery-address">
                <div class="label-name">收货地址：</div><div class="address" v-text="formatAddress(item)">天津省-天津市-和平区-111,某2,18520640817</div>
              </div>
              <div v-if="item.isAgree === undefined" class="approval-status-no">未审批</div>
              <div v-if="item.isAgree === false" class="approval-status-reject">拒绝</div>
              <div v-if="item.isAgree" class="approval-status-agree">已同意</div>
              <div class="approval-logging" @click.stop="toShowApprovedLogging(item)">
                审核记录
              </div>
              <div class="approval-edit" @click="toEdit(item.orderBatch)">修改</div>
            </template>
            <div v-for="(store,j) in list" :key="j" class="content-item">
              <div class="monopoly-container">
                <div class="store-container">
                  <div class="store-name">
                    <label class="check-label">
                      <!-- <input type="checkbox" :checked="store.checked" @click="selectStore(j)"> -->
                      <i :class="store.checked ? 'el-icon-success' : 'el-icon-circle-check'" @click="selectStore(j)" />
                      <i class="iconfont icon-no-check" />
                      <img src="../../assets/images/shop.png" alt="">
                      <span>店铺： </span><span v-text="store.sellerName">仪器仪表专卖</span>
                    </label>

                  </div>
                  <div class="order-num">
                    <span>预选单号：</span><span v-text="item.orderBatch">20191029144030932-3333</span>
                  </div>
                </div>
                <div v-for="(repository, k) in store.repositoryVos" :key="k" class="goods-list">
                  <div class="stock-name">
                    <label class="check-label">
                      <i :class="repository.checked ? 'el-icon-success' : 'el-icon-circle-check'" @click="selectRepository(j, k)" />

                      <i class="iconfont icon-no-check" />
                      <img src="../../assets/images/warehouse.png" alt="">
                      <span
                        class="stock-name-info"
                        v-text="repository.repositoryName"
                      >仓库名称</span>
                    </label>
                  </div>
                  <div v-for="(item, m) in repository.merchandiseVos" :key="m" class="goods-item">
                    <div v-if="!invalid(item)" class="lose-efficacy">失效</div>
                    <div v-else-if="stockOut(item)" class="lose-efficacy">缺货</div>
                    <!-- <input type="checkbox" v-else :checked="item.checked" @click="selectItem(j,k,m)"> -->
                    <i v-else :class="item.checked ? 'el-icon-success' : 'el-icon-circle-check'" @click="selectItem(j,k,m)" />
                    <img :src="item.mainImage" alt="">
                    <div class="item-info">
                      <div class="name">
                        <span style="font-size:14px;font-weight:700" v-text="item.childCategoryName">钢管</span>
                        <i style="padding-left: 10px;color: #ff3b30;font-size:13px;cursor:pointer" class="iconfont icon-view-text" @click="goSpuList(item)" />
                      </div>
                      <div v-if="item.standardProa && item.proAVal" class="mark" v-text="item.standardProa + '：' + item.proAVal">标 号：外16内6.03</div>
                      <div v-if="item.standardProb && item.proBVal" class="mark" v-text="item.standardProb + '：' + item.proBVal">标 号：外16内6.03</div>
                      <div v-if="item.standardProc && item.proCVal" class="mark" v-text="item.standardProc + '：' + item.proCVal">标 号：外16内6.03</div>
                      <div v-if="item.standardProd && item.proDVal" class="mark" v-text="item.standardProd + '：' + item.proDVal">标 号：外16内6.03</div>
                      <div v-if="item.standardProe && item.proEVal" class="mark" v-text="item.standardProe + '：' + item.proEVal">标 号：外16内6.03</div>
                    </div>
                    <div class="univalence" v-text="item.productPrice.toFixed(2) + '/' + item.unit">58.00</div>
                    <div class="numble" v-text="item.shopAmount">1</div>
                    <div class="total-price" v-text="(item.productPrice * item.shopAmount).toFixed(2)">
                      58.00
                    </div>

                  </div>
                  <div class="money-container">
                    <div class="money-details">
                      <div class="total-money" v-text="`${repository.merchandiseVos.length}件商品，总商品金额：￥${productPrice(repository)}`">2件商品，总商品金额：￥116.00</div>
                      <div class="transportation" v-text="repository.merchandiseVos[0].distance.toFixed(1) + 'km'">运输里程：200.00km</div>
                      <div class="transportation-money">
                        <span>运费总价：</span><span class="all-money" @click="toFreight(store.sellerId, store.sellerName, repository)" v-text="freightPrice(store.sellerId, repository.repositoryId)">￥20.00></span>
                      </div>
                    </div>
                    <div class="total-money" v-text="'仓库合计: ' + totalPrice(store.sellerId, repository)">
                      仓库合计：￥116.00
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="count-container">
              <div class="count">
                <label class="check-label">
                  <div>
                    <i :class="isCheckedAll ? 'el-icon-success' : 'el-icon-circle-check'" @click="selectAll" />
                  </div>
                  <span class="check-all">全选</span>
                </label>
                <div class="count-content">
                  共<span v-text="selectNum">4件</span>，合计：<span
                    class="red-txt"
                  >￥</span><span class="red-txt txt" v-text="totalSelectPrice">166</span>
                </div>
              </div>
              <button class="settle-accounts" :disabled="selectNum === 0" @click="calculate">结算</button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 分页 -->

    <el-pagination
      background
      :current-page.sync="pageParams.index"
      layout="prev, pager, next"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageParams.size"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 审核记录弹窗 -->
    <ApprovedLogging v-if="showApprovedLogging" :order-batch="orderBatch" @closePopUp="closePopUp" />
  </div>
</template>
<script>
import { toProductList } from '@/js/product'
import ApprovedLogging from './component/PopUpApprovedLogging'
import { listChildAccount, listMainCart, listProductDetail, freight } from '@/api/pre-order/pre-order-for-me'
import { MessageBox } from 'element-ui'
import { FreightData } from '@/js/constant'
export default {
  components: {
    ApprovedLogging
  },
  data() {
    return {
      formInline: {
        childId: '',
        orderBatch: ''
      },
      accountData: [],
      activeNames: '0',
      pageSize: 5,
      pageIndex: 1,
      showApprovedLogging: false,
      tableData: [],
      address: {},
      preOrderList: [],
      list: [],
      freights: [],
      pageParams: {
        index: 1,
        size: 5
      },
      total: 0,
      orderBatch: '',
      isCheckedAll: false
    }
  },
  computed: {
    selectNum() {
      return this.list.reduce((prev, cur) => prev + cur.repositoryVos
        .reduce((_prev, _cur) => _prev + _cur.merchandiseVos
        // .reduce((prev_, cur_) => prev_ + cur_.checked ? 1 : 0, 0), 0), 0)
          .reduce((prev_, cur_) => prev_ + (cur_.checked && (this.invalid(cur_) && !this.stockOut(cur_) || (this.stockOut(cur_) && this.cartEdit)) ? 1 : 0), 0), 0), 0)
    },
    failureNum() {
      return this.list.reduce((prev, cur) => prev + cur.repositoryVos
        .reduce((_prev, _cur) => _prev + _cur.merchandiseVos
          .reduce((prev_, cur_) => prev_ + !this.invalid(cur_) ? 1 : 0, 0), 0), 0)
    },
    totalSelectPrice() {
      let total = 0
      this.list.forEach(i => {
        i.repositoryVos.forEach(j => {
          const temp = this.repositoryPrice(j)
          if (typeof temp === 'number' && !isNaN(temp)) {
            total += temp * 1000
          } else {
            total += Number(temp.substr(1)) * 1000
          }
        })
      })
      total /= 1000
      return total.toFixed(2)
    }
  },
  beforeDestroy() {
    this.handleChange()
  },
  created() {
    this.getAccount()
    this.getList()
  },
  methods: {
    // 获取推单过的子账号列表
    getAccount() {
      listChildAccount().then(response => {
        this.accountData = response.data
      })
    },
    // 获取他为我选单列表
    getList() {
      const params = {
        childId: this.formInline.childId,
        orderBatch: this.formInline.orderBatch
      }
      listMainCart(this.pageParams, params).then(response => {
        this.preOrderList = response.data.records
        this.preOrderList.forEach(i => {
          i.open = false
        })
        this.total = response.data.total
      })
    },
    // 获取店铺商品信息
    getData(orderBatch) {
      listProductDetail(orderBatch).then(res => {
        const list = this.initList(res.data)
        this.list = list
        list.forEach(i => {
          this.freightParam(i)
        })
      }).catch(res => {})
    },
    initList(records) {
      const list = JSON.parse(JSON.stringify(records))
      list.forEach(j => {
        j.checked = false
        j.repositoryVos.forEach(k => {
          k.checked = false
          k.merchandiseVos.forEach(m => {
            m.checked = false
          })
        })
      })
      return list
    },
    // 跳转店铺列表
    toStore(store) {
      const storeCondition = {}
      storeCondition.sellerId = store.sellerId
      storeCondition.buyNum = 1
      storeCondition.sortType = 0
      storeCondition.address = this.address
      toStorePage(this, storeCondition)
    },
    // 跳转商品详情页
    goSpuDetail(item) {
      if (!this.invalid(item)) {
        return
      }
      toProductDetail(this, item.spuRepositoryId, item.shopAmount, this.address)
    },
    // 跳转商品搜索结果页
    goSpuList(item) {
      if (!this.invalid(item)) {
        return
      }
      const address = this.address
      const condition = {
        sortType: 0,
        childCategory: {
          id: item.childCategoryId,
          categoryUnit: item.unit,
          standardProa: item.standardProa,
          standardProb: item.standardProb,
          standardProc: item.standardProc,
          standardProd: item.standardProd,
          standardProe: item.standardProd,
          categoryName: item.childCategoryName
        },
        mainCategory: {
          id: item.mainCategoryId,
          categoryName: item.mainCategoryName
        },
        proaId: item.spuAId,
        probId: item.spuBId,
        procId: item.spuCId,
        prodId: item.spuDId,
        proeId: item.spuEId,
        address,
        info: { proa: item.proAVal, prob: item.proBVal, proc: item.proCVal, prod: item.proDVal, proe: item.proEVal },
        buyNum: item.shopAmount,
        searchRange: 50 || item.distance
      }
      toProductList(this, condition)
    },
    freight(data) {
      freight(data).then(res => {
        if (this.tempItem) {
          const { j, k } = this.tempItem
          const sellerId = this.list[j].sellerId
          const repositoryId = this.list[j].repositoryVos[k].repositoryId
          const freights = JSON.parse(JSON.stringify(this.freights))
            .filter(i => i.sellerId !== sellerId && i.repositoryId !== repositoryId)
          this.freights = freights.concat(res.data)
        } else if (data.addressFlag) {
          this.freights = this.freights.concat(res.data)
        } else {
          this.freights = this.freights.concat(res.data)
        }
      }).catch(res => {})
    },
    totalPrice(sellerId, repository) {
      const price = repository.merchandiseVos.reduce((prev, cur) => prev + (this.invalid(cur) && !this.stockOut(cur) ? cur.shopAmount * cur.productPrice : 0), 0)
      if (this.freights.length === 0) {
        return price.toFixed(2)
      }
      const list = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repository.repositoryId)
      const freightPrice = list.length === 0 ? 0 : list[0].gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0)
      return `￥${(freightPrice + price).toFixed(2)}`
    },
    freightPrice(sellerId, repositoryId) {
      if (this.freights.length === 0) {
        return '计算中'
      }
      const list = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repositoryId)
      if (list.length === 0) {
        return '￥' + Number(0).toFixed(2)
      }
      return '￥' + list[0].gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0).toFixed(2)
    },
    freightParam(store) {
      const data = {
        sellerId: store.sellerId
      }
      const submitInfoList = []
      let flag = false
      store.repositoryVos.forEach(i => {
        const submitInfo = {
          reposityId: i.repositoryId,
          distance: i.merchandiseVos[0].distance
        }
        const spuInfoList = []
        i.merchandiseVos.forEach(j => {
          if (this.invalid(j) && !this.stockOut(j)) {
            flag = true
            spuInfoList.push({
              spuId: j.spuId,
              buyNum: j.shopAmount
            })
          }
        })
        if (spuInfoList.length > 0) {
          submitInfo.spuInfoList = spuInfoList
          submitInfoList.push(submitInfo)
        }
      })
      data.submitInfoList = submitInfoList
      if (flag) {
        this.freight(data)
      }
    },
    // 计算商品总价
    productPrice(repository) {
      return (repository.merchandiseVos.reduce((prev, cur) => prev + (this.invalid(cur) && !this.stockOut(cur) ? cur.shopAmount * cur.productPrice : 0), 0)).toFixed(2)
    },
    repositoryPrice(repository) {
      const price = repository.merchandiseVos.reduce((prev, cur) => prev + (cur.checked ? cur.shopAmount * cur.productPrice : 0), 0)
      if (this.freights.length === 0) {
        return price.toFixed(2)
      }
      let freightPrice = 0
      if (price !== 0) {
        const list = this.freights.filter(i => i.reposityId === repository.repositoryId)
        freightPrice = list.length === 0 ? 0 : list[0].gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0)
      }
      return `￥${(freightPrice + price).toFixed(2)}`
    },
    selectItem(j, k, m) {
      const list = this.list
      const store = list[j]
      const repository = store.repositoryVos[k]
      const item = repository.merchandiseVos[m]
      const checked = item.checked
      item.checked = !checked
      this.index = checked ? -1 : j
      const length = store.repositoryVos.reduce((prev, cur) => prev + cur.merchandiseVos
        .reduce((_prev, _cur) => _prev + ((this.invalid(_cur) && !this.stockOut(_cur)) || (this.stockOut(_cur) && this.cartEdit) ? 1 : 0), 0), 0)
      const check = store.repositoryVos.reduce((prev, cur) => prev + cur.merchandiseVos
        .reduce((_prev, _cur) => _prev + (_cur.checked ? 1 : 0), 0), 0)
      const _length = repository.merchandiseVos.reduce((_prev, _cur) => _prev + ((this.invalid(_cur) && !this.stockOut(_cur)) || (this.stockOut(_cur) && this.cartEdit) ? 1 : 0), 0)
      const _check = repository.merchandiseVos.reduce((_prev, _cur) => _prev + (_cur.checked ? 1 : 0), 0)
      repository.checked = !checked && _length === _check
      store.checked = !checked && length === check
      this.isCheckedAll = !checked && this.list.length === this.list.filter(store => store.checked).length
    },
    selectStore(j) {
      const store = this.list[j]
      const checked = store.checked
      store.checked = !checked
      this.index = checked ? -1 : j
      store.repositoryVos.forEach(k => {
        k.checked = !checked
        k.merchandiseVos.forEach(m => {
          if ((this.invalid(m) && !this.stockOut(m)) || (this.stockOut(m) && this.preOrderEdit)) {
            m.checked = !checked
          }
        })
      })
      this.isCheckedAll = !checked && this.list.length === this.list.filter(store => store.checked).length
    },
    selectRepository(j, k) {
      const list = this.list
      const store = list[j]
      const item = store.repositoryVos[k]
      const checked = item.checked
      item.checked = !checked
      this.index = checked ? -1 : j
      item.merchandiseVos.forEach(m => {
        if ((this.invalid(m) && !this.stockOut(m)) || (this.stockOut(m) && this.preOrderEdit)) {
          m.checked = !checked
        }
      })
      store.checked = !checked && store.repositoryVos.length === store.repositoryVos.filter(repository => repository.checked).length
      this.isCheckedAll = !checked && this.list.length === this.list.filter(store => store.checked).length
    },
    // 全选
    selectAll() {
      this.isCheckedAll = !this.isCheckedAll
      const checked = this.isCheckedAll
      this.list.forEach(j => {
        j.checked = checked
        j.repositoryVos.forEach(k => {
          k.checked = checked
          k.merchandiseVos.forEach(m => {
            if ((this.invalid(m) && !this.stockOut(m)) || (this.stockOut(m) && this.cartEdit)) {
              m.checked = checked
            }
          })
        })
      })
    },
    // 格式化账户备注
    formatRemark(item) {
      if (item.remark) {
        return item.remark + '(' + item.userName + ')'
      } else {
        return item.userName
      }
    },
    // 格式化地址
    formatAddress(item) {
      if (item.recieveAddress) {
        var address = JSON.parse(item.recieveAddress)
        let recieveAddress = address.receiveProvince + '-' + address.receiveCity + '-' + address.receiveDistrict + '-' + address.receiveAddress
        if (address.receiverName && address.receiverPhone) {
          recieveAddress = recieveAddress + ',' + address.receiverName + ',' + address.receiverPhone
        }
        return recieveAddress
      }
    },
    // false 失效
    invalid(item) {
      return item.status === 5 && item.brandId === item.cartBrandId &&
        item.proAId === item.spuAId && item.proBId === item.spuBId &&
        item.proCId === item.spuCId && item.proDId === item.spuDId && item.proEId === item.spuEId
    },
    // true 缺货
    stockOut(item) {
      return item.skuNum < item.minBuyNum || item.skuNum < item.shopAmount
    },
    toShowApprovedLogging(item) {
      this.orderBatch = item.orderBatch
      this.showApprovedLogging = true
      document.body.style.overflow = 'hidden'
    },
    closePopUp() {
      this.showApprovedLogging = false
      document.body.style.overflow = 'auto'
    },
    toEdit(orderBatch) {
      // 带参数跳转
      this.$router.push({ path: '/edit-orders', query: { orderBatch }})
    },
    onSubmit() {
      if (!this.formInline.childId && !this.formInline.orderBatch) {
        this.$message.error('请至少选择一个搜索条件！')
        return
      }
      this.$message.success('搜索成功')
      this.getList()
    },
    // 重置
    resetForm() {
      this.$refs.formInline.resetFields()
      this.$message.success('重置搜索成功')
      this.getList()
    },
    handleChange(val) {
      this.activeNames = val
      this.preOrderList.forEach(i => {
        i.open = false
        if (val) {
          if (i.orderBatch === val) {
            i.open = true
            this.list = []
            this.isCheckedAll = false
            this.address = JSON.parse(i.recieveAddress)
            this.getData(val)
          }
        }
      })
    },
    // 查看运费详情
    toFreight(sellerId, sellerName, repository) {
      const spuList = []
      this.list.filter(i => i.sellerId === sellerId)[0].repositoryVos
        .filter(i => i.repositoryId === repository.repositoryId)[0]
        .merchandiseVos.forEach(i => {
          if (this.invalid(i) && !this.stockOut(i)) {
            const {
              mainImage,
              childCategoryName,
              productPrice,
              shopAmount,
              standardProa,
              standardProb,
              standardProc,
              standardProd,
              standardProe,
              proAVal,
              proBVal,
              proCVal,
              proDVal,
              proEVal,
              unit
            } = i
            const property = []
            if (standardProa && proAVal) {
              property.push({
                name: standardProa,
                value: proAVal
              })
            }
            if (standardProb && proBVal) {
              property.push({
                name: standardProb,
                value: proBVal
              })
            }
            if (standardProc && proCVal) {
              property.push({
                name: standardProc,
                value: proCVal
              })
            }
            if (standardProd && proDVal) {
              property.push({
                name: standardProd,
                value: proDVal
              })
            }
            if (standardProe && proEVal) {
              property.push({
                name: standardProe,
                value: proEVal
              })
            }
            const obj = {
              mainImg: mainImage,
              spuName: childCategoryName,
              price: productPrice,
              unit,
              buyNum: shopAmount,
              property
            }
            spuList.push(obj)
          }
        })
      if (spuList.length <= 0) {
        this.$message.error('暂无需要计算运费的商品')
        return
      }
      const gruopFeeInfoList = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repository.repositoryId)[0].gruopFeeInfoList
      const totalFee = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0)
      const totalWeight = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalWeight, 0)
      const totalVolue = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalVolue, 0)
      const freightData = {
        sellerName: sellerName,
        productList: {
          spuList,
          distance: gruopFeeInfoList[0].distance,
          totalWeight,
          totalVolue,
          totalFee
        }
      }
      sessionStorage.setItem(FreightData, JSON.stringify(freightData))
      this.$router.push('/prepaid')
    },
    // 去结算
    calculate() {
      console.log(this.selectNum)
      MessageBox.alert('<strong>平台当前暂时不支持线上交易，若有意向采购可电话联系商户哦！</strong>', '预选单结算', {
        dangerouslyUseHTMLString: true
      })
    },
    // 页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {
      this.pageParams.size = size
      // this.loadPost();个数改变的时候再次调用请求
    },
    // 页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      console.log(currentPage)
      this.pageParams.index = currentPage
      this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-icon-success{
color: #ff3b30;
font-size: 15px;
}
::v-deep .el-icon-circle-check{
font-size: 15px;
}
.el-pagination{
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #FF3B30FF;
  border: 1px solid #FF3B30FF;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled){
  // background-color: #fff;
  border: 1px solid #DDDDDDFF;
}
::v-deep .el-pagination.is-background .btn-prev{
  border: 1px solid #DDDDDDFF;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-left:before {
  content: "上一页";
}
::v-deep .el-pagination.is-background .btn-next{
  border: 1px solid #DDDDDDFF;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-right:before {
  content: "下一页";
}
.big-box {
  background-color: #f7f7f7;
  height: 100%;
}
.el-icon-plus:before {
  font-weight: 700;
  color: #10b2d4ff;
}
.el-icon-minus:before {
  font-weight: 700;
  color: #10b2d4ff;
}

.collapse-container {
  background-color: #f7f7f7;
  // padding-bottom: 12px;
}
.count-container {
  background-color: #f5f5f5;
  margin-top: 23px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: flex-end;
  flex-direction: column;
  height: 126px;
  padding: 23px;
  .count {
    background-color: #fff;
display: flex;
align-items: center;
// justify-content: center;
.check-label{
  display: flex;
  // justify-content: center;
  margin-right: 10px;
  align-items: center;
}
.count-content{
   display: flex;
  // justify-content: center;
  align-items: center;
}
    .red-txt {
      color: #ff3b30ff;
    }
    .txt {
      font-size: 18px;
    }
  }
  .settle-accounts {
    width: 107px;
    height: 40px;
    color: #fff;
    line-height: 47px;
    text-align: center;
    border-radius: 4px;
    background-color: #e03523ff;
    font-size: 16px;
  }
  .settle-accounts:hover {
    cursor: pointer;
  }
}
::v-deep .el-collapse-item__header {
  height: 52px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  border: none;
  .approval-logging {
    width: 81px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02a9f1ff;
    border-radius: 4px;
    color: #ffffffff;
    margin-right: 15px;
  }
  .approval-edit {
    width: 47px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02a9f1ff;
    border-radius: 4px;
    color: #ffffffff;
  }
  .approval-status-no {
    color: #fc8a41ff;
    margin: 0 70px 0 50px;
    height: 52px;
    width: 50px;
  }
  .approval-status-reject {
    color: #ff3b30;
    margin: 0 70px 0 50px;
    height: 52px;
    width: 50px;
  }
  .approval-status-agree {
    color: #4cd964ff;
    margin: 0 70px 0 50px;
    height: 52px;
    width: 50px;
  }
  .order-source {
    min-width: 215px;
    margin-left: 10px;
    // margin: 0 40px 0 0;
  }
  .delivery-address {
    margin: 0 0 0 10px;
    height: 52px;
    display: flex;
    align-items: center;
    flex: 1;
    .label-name {
          width: 70px;
    height: 52px;
    }
    .address{
    width: 385px;
    height: 52px;
    display: flex;
   line-height: 20px;
    align-items: center;
    }
  }
}
.content-item {
  .monopoly-container {
    // padding-left: 20px;
    .store-container {
      padding: 17px 24px 0 20px;
      display: flex;
      background-color: #fff;
      // border-bottom: 1px dashed #e5e5e5;

      color: #3d3d3dff;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      // margin-bottom: 20px;
      .store-name {
        label {
          display: flex;
          align-items: center;
          img {
            width: 15px;
            height: 15px;
            object-fit: cover;
            margin: 0 10px;
          }
        }
      }
    }
    .stock-name {

      // padding-left: 18px;
      padding-bottom: 10px;
    margin: 0 20px;
      margin-top: 7px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px dashed #E5E5E5FF;
      img {
        width: 11px;
        height: 11px;
        object-fit: cover;
        margin: 0 10px;
      }
      span {
        color: #a7a7aaff;
      }
      label {
        display: flex;
        align-items: center;
      }
    }
    .goods-list {
      background-color: #fff;

      .goods-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding: 0px 60px 0 20px;
        position: relative;
        img {
          width: 83px;
          height: 83px;
          object-fit: cover;
          margin-right: 30px;
          margin-left: 20px;
        }
        .item-info {
          height: 83px;

          .mark {
            font-size: 12px;
            color: #a7a7aa;
          }
        }
          .lose-efficacy {
            margin: 0 3px 0 3px;
          width: 36px;
          text-align: center;
            height: 15px;
            line-height: 15px;
            background-color: #a7a7aa;
            border-radius: 2px;
            color: #fff;
            font-size: 11px;
            position: absolute;
           top: 35px;
    left: -1px;
          }
        .univalence {
              margin-left: 354px;
        }
        .numble {
          margin: 0 89px 0 106px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .total-price {
          // margin-right: 106px;
        }
        .results-page {
          color: #6b6b6bff;
          span {
            margin-left: 10px;
          }
        }
        .results-page {
          cursor: pointer;
        }
      }
      .goods-item:last-child {
        margin-bottom: 15px;
      }
    }
  }
  .money-container {
    // margin-bottom: 20px;
    height: 69px;
    padding: 13px 15px 15px 15px;
    display: flex;
    background-color: #fff;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    color: #6b6b6b;
    // border: 1px solid ;
     border-top: 3px solid #e03523ff;
     border-bottom: 1px solid #EBEBEBFF;
    .money-details {
      display: flex;
      .transportation {
        margin: 0 25px;
      }
      .transportation-money {
        .all-money {
          color: #02a9f1;
        }
        .all-money:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.header-container {
  background-color: #fff;

  .title {
    height: 56px;
    font-weight: 700;
    font-size: 16px;
    padding-left: 20px;
    line-height: 56px;
    border-bottom: 3px solid #e5e5e5ff;
  }
  .demo-form-inline {
    padding: 20px;
    height: 77px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.main-container {
  background-color: #f7f7f7;
  .list-container {
    height: 52px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 50px 0 20px;
    span:nth-child(2) {
      margin: 0 318px 0 105px;
    }
    span:nth-child(4) {
      margin: 0 68px 0 64px;
    }
    span:nth-child(5) {
      margin-right: 110px;
    }
  }
}
.btn {
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .search {
    background-color: #ff3b30;
    width: 70px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 6px;
  }
  .search:hover {
    cursor: pointer;
  }
  .reset-form {
    background-color: #f5f5f5;
    width: 70px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3d3d3dff;
    border: 1px solid #e5e5e5ff;
  }
  .reset-form:hover {
    cursor: pointer;
  }
}
::v-deep .header-container .demo-form-inline[data-v-8e59b9f2] {
  justify-content: space-between;
}

::v-deep .el-input {
  height: 35px;
  .el-input__inner {
    height: 35px;
  }
}
::v-deep .el-form-item__label {
  height: 35px;
  padding: 0;
}
::v-deep .el-form-item {
  margin: 0;
  margin-right: 40px;
}
::v-deep .el-form-item:nth-child(3) {
  margin-left: 300px;
  margin-right: 0px;
}
::v-deep .el-form-item__label {
  text-align: right;
}
::v-deep .el-form-item__content {
  width: 130px;
  height: 35px;
  .el-select {
    height: 35px;
  }
}
::v-deep .el-collapse {
  margin-top: 10px;
  border: none;

  background-color: #fff;
}
::v-deep .el-collapse-item__arrow {
  display: none;
}
::v-deep .el-collapse-item__header.is-active {
  border-bottom: 1px solid #e5e5e5ff;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
.el-select {
  width: 170px;
  ::v-deep .el-input__icon {
    line-height: 35px;
  }
}
</style>
